<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>easy-snippets</title>
    <style>
      .titlebar-title_text {
        font-weight: bolder !important;
      }
      .titlebar-minimize:hover, .titlebar-resize:hover, .titlebar-fullscreen:hover {
        background-color: var(--color-selected);
      }
    </style>
    <link name='theme' rel="stylesheet" href="">
    <% if (htmlWebpackPlugin.options.nodeModules) { %>
      <!-- Add `node_modules/` to global paths so `require` works properly in development -->
      <script>
        require('module').globalPaths.push('<%= htmlWebpackPlugin.options.nodeModules.replace(/\\/g, '\\\\') %>')
      </script>
    <% } %>
  </head>
  <body>
    <div id="titlebarRegion" style="position: absolute; top: 0; left: 0; width: 100%; z-index: 5;border-bottom: 1px solid var(--color-bg-simple);"></div>
    <div id="app">
    </div>
    <!-- Set `__static` path to static files in production -->
    <% if (!process.browser) { %>
      <script>
        if (process.env.NODE_ENV !== 'development') window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
      </script>
    <% } %>
    <script>
      const remote = require('electron').remote
      const ElectronTitlebar =  require('electron-custom-titlebar')
      const titlebar = new ElectronTitlebar({
        title: 'Easy Snippets',
        backgroundColor: 'var(--color-bg)',
        color: 'var(--color-text)',
        fullscreen: true
      }) 
      const contextElement = document.querySelector('#titlebarRegion')
      titlebar.appendTo(contextElement) 
      // Dispatch control actions to currentWindow
      titlebar.on('close', () => { remote.getCurrentWindow().close() })
      titlebar.on('fullscreen', () => { remote.getCurrentWindow().maximize() })
      titlebar.on('minimize', () => { remote.getCurrentWindow().minimize() })
      titlebar.on('maximize', () => { remote.getCurrentWindow().restore() })
      // Update menu when electron contextMenu has changed
      // menus files handle template and actions for app
      // const { menus } = remote.require('./main')
      // menus.on('update', () => {
      //   const updatedMenu = menus.getMenuTemplate()
      //   titlebar.update({ ...titlebar.options, menu: updatedMenu })
      // })
    </script>

    <!-- webpack builds are automatically injected -->
  </body>
</html>
